<template>
  <div>
    <div
      style="border-bottom: solid var(--grid) 1px;"
      class="relative w-full h-[156px] flex flex-row justify-between items-center border-b border-solid border-[var(--grid)] s2k:h-[208px] s4k:h-[334px]"
    >
      <div class="flex flex-col justify-center items-start ml-[32px] mb-[24px] s4k:ml-[64px] s2k:ml-[42px] s2k:mb-[32px]">
        <span class="themeFontColor font-Medium text-[2rem]">Camera 001</span>
        <span
          class="themeFontDescColor font-Medium text-[1.16rem] font-[400] mt-[5px] s2k:mt-[6.7px] s4k:mt-[10px] s2k:mb-[5px]"
        >Location</span>
        <div
          class="w-[100px] h-[26px] rounded-[12px] bg-[var(--bule)] mt-[8px] flex flex-row justify-center items-center s2k:w-[133px]  s2k:h-[34px] s4k:w-[200px] s2k:rounded-[16px] s4k:h-[52px] s4k:mt-[12px] s4k:rounded-[24px]"
        >
          <svg-icon name="type" width="13px" height="13px" class="text-[var(--bule-svg)] s2ksvg s4ksvg"></svg-icon>
          <span
            class="text-[1rem] text-[var(--bule-font)] font-[400] font-Medium ml-[4px] s2k:ml-[5.3px] s4k:ml-[14px]"
          >Connected</span>
        </div>
      </div>
      <div
        class="absolute bottom-[-1px] left-[32px] flex flex-row items-center text-[1.3rem] text-[#9CA3AF] font-[400] s2k:left-[42px] s4k:left-[64px]"
      >
        <div
          :style="{
            borderBottom: typeIndex === 1 ? 'solid #3F83F8 1px' : '',
            color: typeIndex === 1 ? '#3F83F8' : '',
          }"
          class="cursor-pointer pb-[10px] mr-[24px]"
          @click="typeIndex = 1"
        >General</div>
        <div
          :style="{
            borderBottom: typeIndex === 2 ? 'solid #3F83F8 1px' : '',
            color: typeIndex === 2 ? '#3F83F8' : '',
          }"
          class="cursor-pointer pb-[10px] mx-[24px]"
          @click="typeIndex = 2"
        >Recording Schedule</div>
        <div
          :style="{
            borderBottom: typeIndex === 3 ? 'solid #3F83F8 1px' : '',
            color: typeIndex === 3 ? '#3F83F8' : '',
          }"
          class="cursor-pointer pb-[10px] mx-[24px]"
          @click="typeIndex = 3"
        >VAs</div>
        <div
          :style="{
            borderBottom: typeIndex === 4 ? 'solid #3F83F8 1px' : '',
            color: typeIndex === 4 ? '#3F83F8' : '',
          }"
          class="cursor-pointer pb-[10px] ml-[24px]"
          @click="typeIndex = 4"
        >Playback</div>
      </div>
    </div>
    <General v-if="typeIndex === 1" />
    <Schedule v-else-if="typeIndex === 2" />
    <div v-else-if="typeIndex === 4" class="w-full h-full flex flex-col items-center">
      <Setting />
    </div>
  </div>
</template>

<script setup>
import General from "./cameraType/general.vue";
import Setting from "./cameraType/setting.vue";
import Schedule from "./cameraType/schedule.vue";
import { onMounted, reactive, ref, nextTick, watch } from "vue";
import SvgIcon from "@/components/SvgIcon.vue";
import videoSrc from '@/assets/video/life2.mp4'

const typeIndex = ref(4); // Camera Type
const videoList = ref([
  {id: 1, src: videoSrc, startTime: '050000', endTime: '070208', eng: 'A'},
  {id: 2, src: videoSrc, startTime: '080000', endTime: '100208', eng: 'B'},
])

</script>

<style scoped lang="scss">
:deep(.el-drawer) {
  width: 16.67% !important;
  background-color: var(--theme) !important;
  border-left: solid var(--grid) 1px;
  z-index: 999 !important;
}
@media screen and (min-width: 2560px) {
  .s2ksvg {
    transform: scale(1.5) !important;
  }
}
@media screen and (min-width: 3840px) {
  .s4ksvg {
    transform: scale(2) !important;
  }
  :deep(.el-drawer) {
    padding: 0 20px;
  }
}
</style>
